<template>
<div class="photolist-contain">
<!-- 1,顶部横向滚动菜单栏 采用iscroll脚本  图片分类菜单 title -->
<div class="photolist-header">
  <div class="photolist-scroll">
    <ul class="header-box" >
        <li :class="[
         'header-item',
         {now:activeitemid===item.id}]"
         v-for="item in catelist" 
         :key="item.id">
          <a :href="'#/home/photolist?id='+item.id" @click="clikPhontlist(item.id)">
           <span >{{item.title}} </span>
          </a>
        </li>
    </ul>
  </div> 
</div>
<!-- 2,内容展示区使用轮播图方式            每个分类中所有图片的展示  
2.1 外层 width 100% 同屏幕宽度
2.2 中间层盒子  width photocategroy.length*100% 有length个屏幕宽度  包含所有分类的图片，横向展开，像轮播图片，每个分类占1个width 100%，
2.3 内层item  width photocategroy.length% 每个分类的图片展示 item -->
<div class="photolist-content">
  <div class="content-box" ref="photolistbox">
      <ul class="contentlist photo-Lazyload" v-for="list in catelist" :key="list.id">
          <!-- 如果分类id为0就取全部图片否则根据分类id过滤出该分类图片 -->
          <router-link v-for="item in list.id===0?imgs:imgs.filter(item=>item.cateid.some(i=>i===list.id )) " 
            :key="item.id" tag="li" 
            :to="'/home/photoinfo/'+item.id+'/'+item.title">
            <!-- 图片用懒加载方式，不能使用src，而是v-lazy指令 -->
            <img v-lazy="item.img_url">
            <!-- 文字 -->
            <div class="info">
              <div class="info-title">{{item.title}}</div>
              <div class="info-content">{{item.zhaiyao}}</div>
            </div>
          </router-link>
      </ul>
  </div>
</div>


</div>
</template>

<script>
//引入封装的左右滑动模块
import swipe from '../../util/swipe1'
//1,引入iscroll
import IScroll from '../../lib/iscroll/iscroll.js'
// 定义全局对象
var xScroll;
// var yScroll;
var nowH = 0;//滚动当前的高度
/*-- 在内存中加载iscroll初始化函数 注意 初始化对象为最外层 共四层--*/
function loaded () {
  // 横滑对象
  xScroll=new IScroll('.photolist-header', {
    eventPassthrough: true,
    scrollX: true, 
    scrollY: false, 
    bounce:false,//阻止边界反弹，产生过界效果
    scrollbars: false,//滚动条是否可见 false 不可见
    preventDefault: false
     });
  // 竖滑对象
  // yScroll=new IScroll('.photolist-content',{
  //   scrollX:false,
  //   scrollY:true,
  //   mouseWheel: true, //支持鼠标中键滚轮
  //   click: true,
  //   // momentum:false,//关闭势能动画
  //   bounce:false,//阻止边界反弹，产生过界效果
  //   freeScroll:false,
  // });
}
export default {
  data(){
    return {
      activeitemid:parseInt(this.$route.query.id ? this.$route.query.id :0),// 激活样式控制 this.$route.query.id是字符串要转换为int类型
      catelist:JSON.parse(window.localStorage.getItem("catelist")||'[]'),//从本地图片分类列表缓存取出来的数据
      imgs:JSON.parse(window.localStorage.getItem("imgs")||'[]'),//从本地图片缓存取来的图片数据
      imgsFilter:[],//根据图片分类id过滤出的图片列表
      transitionName:'left',//动画控制 默认为从右进入，从左离开
    }
  },

  mounted(){
    //挂载 完成初始化
    loaded()
    /*dom加载完成后，绑定滑动事件，即可实现横滑*/
    // 横滑
	  document.querySelector('.photolist-header').addEventListener('touchmove', function (e) { 
      e.preventDefault()
    }, false)
    //增加竖滑滚轮,就会增加position：
    // var len = document.querySelector('.photolist-content').offsetHeight//父容器高度
    // var height = document.querySelector('.content-box').offsetHeight//滚动层高度
    // document.querySelector('.photolist-content').addEventListener("mousewheel",function(e){
      // var event = e || window.event
      // var distanceY = event.detail || event.wheelDelta;
      // 滚轮往上是event.wheelDelta，是负数，滚轮往下是正值，是event.detail
      // nowH +=distanceY
	    // 设定nowH的边界，即滚动的边界
	    // if(nowH>0){nowH=0}
	    // if(nowH<len-height){nowH=len-height}
      // document.querySelector('.content-box').style.top =` ${ nowH }px`//改变滚动层的top
    // },false);
  
    // 挂载自己封装的滑动模块
    this.swipeContent()
  },
  methods:{
    //图片类别数据获取
    getImgCategory(){
      this.$axios.get('/getimgcategory').then(res=>{
        if(res.data.status===0){
          //如果数据更新，就更新本地图片分类缓存
          window.localStorage.setItem('catelist',JSON.stringify(res.data.message))
        }else{
          Toast('图片分类数据未更新...')
        }
      }).catch(err=>{
        Toast('无法连接服务器' + err)
      })
    },
    //图片数据获取
    getImages(){
    
      this.$axios.get('/getimages/').then(res=>{
        // 1.1 更新本地缓存
        if(res.data.status===0){
         //如果数据更新，就更新本地图片缓存
          window.localStorage.setItem('imgs',JSON.stringify(res.data.message))
        }else{
          //如果数据未更新，就从以前本地缓存的数据中取，并提示数据未更新。
          Toast('图片未更新...')
        }
        
      }).catch(err=>{
        Toast('无法连接服务器' + err)
      })
    },
    //菜单栏点击事件
    clikPhontlist(listsid){
      console.log('菜单的id',listsid,'当前激活的id',this.activeitemid)
      //调用滑动图片事件
      this.activeitemid=listsid//必须立即做，因为下一步调用的滑动事件需要当前的分类id，否则会是点击之前的id。
      this.swipeContent()
      // 以下是重新定义的位移方法，那么和模块定义的方法存在重复，并且产生混乱，正确的方式就是只有一种移动，方可保持一致。
      // let x=listsid/this.catelist.length*100
      // // console.log(x)
      // document.querySelector('.content-box').style.transform = 'translateX(-'+x+'%)'
      // document.querySelector('.content-box').style.webkitTransform = 'translateX(-'+x+'%)'
      // console.log('菜单的id',listsid,'当前激活的id',this.activeitemid)
      // // this.activeitemid=this.$route.query.id
    },
    //滑动图片事件 利用自封装的滑动事件swipe1.js
    swipeContent(){
      // 操作对象
      var dom=document.querySelector('.content-box')
      //最大边界
      var max=this.catelist.length-1
      // 参数：操作对象，当前id，最大边界，左回调（接收事件参数e、页面参数index），右回调（接收事件参数e、页面参数index）
      swipe(dom,this.activeitemid,max,(e,index)=>{
        console.log('左滑手势')
        //用页面参数index改变浏览器的路由 
        this.$router.push({'path':'?id='+index})
        this.activeitemid=index
      },(e,index)=>{
        console.log('右滑手势')
        //用页面参数index改变浏览器的路由 
        this.$router.push({'path':'?id='+index})
        this.activeitemid=index
      })
      
    }
  },
  // watch:{
  //   //监视路由
  //   '$route.query.id':function (newVal,oldVal) {
  //     // console.log(newVal+'-------'+oldVal)
  //     //改变高亮的id
  //     this.activeitemid=(newVal===undefined)?0:parseInt(newVal)
  //     //移动图片到新的位置,调用点击事件方法即可
  //     // this.clikPhontlist(this.activeitemid)
  //     console.log('当前路由id',this.$route.query.id,'当前激活的id',this.activeitemid);
      
  //   },

  // }
}
</script>

<style lang='scss' scoped>
$item-width:58px;
$item-num:8;
.photolist-contain{
  -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  display: inline;
  height: 100%;
  background: #ccc;
  overflow: hidden;
  .photolist-header{
    position: relative;
	  z-index: 1;
	  height: 44px;
	  width: 100%;
    position: fixed;
    left: 0;
    top: 40px;
    
	  background: #fff;
	  overflow: hidden;
	  -ms-touch-action: none;
    .photolist-scroll{
      position: absolute;
	    z-index: 1;
	    -webkit-tap-highlight-color: rgba(0,0,0,0);
	    -webkit-transform: translateZ(0);
	    -moz-transform: translateZ(0);
	    -ms-transform: translateZ(0);
	    -o-transform: translateZ(0);
	    transform: translateZ(0);
      // width:$item-width*8;
	    -webkit-touch-callout: none;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    -webkit-text-size-adjust: none;
	    -moz-text-size-adjust: none;
	    -ms-text-size-adjust: none;
	    -o-text-size-adjust: none;
	    text-size-adjust: none;
      .header-box{
        display: flex;
        flex-wrap: nowrap;
        padding: 0;
	      margin: 0;
        width: $item-width * $item-num;
        .header-item{
          flex:0 0 $item-width;//不放大、不缩小、每个分类菜单在主轴方向占$item-width 58px
          height: 44px;
          line-height: 43px;
          text-align: center;
          border-bottom:1px solid #ccc;
          font-size: 12px;
          overflow: hidden;
          
          a,a:hover,a:active,a:visited{
            display: block;
            width: 100%;
            height:100%;
            text-decoration:none;
            color:black;
            
          }
        }
        .header-item.now{
          border-bottom:2px solid blue;
          a,a:hover,a:active,a:visited{
            color:blue;
          }
        }
      }
      // .header-box::scrollbar{ display: none }
      // .header-box::-webkit-scrollbar{display: none }
    }
    
  }
  .photolist-content{
    padding-top: 44px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: pink;
    // position: relative;//为滚轮事件提供定位用的 用在移动端不好，
    .content-box{
      width: $item-num*100%; 
      display: flex;
      flex-wrap: nowrap;
      // position: absolute;//为滚轮事件提供定位用的 用在移动端不好，
      // left: 0;
      // top: 44px;
      
      .contentlist{
        // padding: 0 5px;
        width: 1/$item-num*100%;
        
      }
      /*懒加载图标在加载时的样式*/
      .photo-Lazyload{
      //  margin-top: 42px;
       list-style: none;
       padding: 10px;
       padding-bottom: 0;//防止底部出现两个10px，因为内层li还有一个margin-bottom: 10px;
        li{
          background-color: #ccc;//因为懒加载图标是白色，所以设为灰色便于展示懒加载图标
          margin-bottom: 10px;
          text-align: center;
          box-shadow: 0 0 9px #999;//边框阴影
          position: relative;//给文字区的相对定位
          img{
            width: 100%;
            vertical-align: middle;//防止出现出现内容和背景在垂直方向上错位。

          }
          img[lazy=loading] {
            width: 40px;
            height: 300px;
            margin: auto;
          }
          .info{
            background-color: rgba(224, 226, 230,0.5);
            color: white;
            text-align: left;
            position: absolute;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            max-height: 84px;//给最大高度使得不会内容多，覆盖过高
            overflow: hidden;

            .info-title {
              font-size: 16px;
            }
            .info-content {
              text-indent: 2em;//缩进2个字符
              font-size: 13px;
            }
          }
        }  
      }
    }
  }
  
}
</style>